<template>
	<view class="page">
		<view class="top-search">
			<view class="logo">
				<image src="/assets/pic/home/home-top-search-logo.png" mode="widthFix" class="image"></image>
			</view>
			<view class="inp" @click="navigateToSearchPage">
				<uv-icon class="search-icon" name="search" color="#333" size="24"></uv-icon>
				<text
					class="search-text">{{ keywordList.length && keywordIndex!==-1 ? keywordList[keywordIndex] : '搜索商品' }}</text>
			</view>
		</view>
		<BottomTabBar :current='0' />
	</view>
</template>

<script setup>
	import {
		onBeforeUnmount,
		onMounted,
		ref
	} from 'vue';
	import {
		navigateToSearchPage
	} from '@/assets/scripts/navigate.js'
	import BottomTabBar from '@/components/BottomTabBar.vue'

	/**
	 * 搜索关键词 定时器
	 */
	let interval = 0
	const keywordIndex = ref(0)
	const keywordList = ['手机贴膜', '电视配件', '米粉卡']

	onMounted(() => {
		setInterval(() => {
			let index = keywordIndex.value + 1
			index = index % keywordList.length
			keywordIndex.value = index
		}, 3000)
	})

	onBeforeUnmount(() => {
		clearInterval(interval)
	})
</script>

<style lang="scss" scoped>
	.page {
		.top-search {
			height: 56rpx;
			display: flex;
			align-items: center;
			padding: 24rpx;

			.logo {
				.image {
					display: block;
					width: 130rpx;
				}
			}

			.inp {
				flex: 1;
				position: relative;
				border-radius: 28rpx;
				background-color: #f0f0f0;
				overflow: hidden;
				height: 56rpx;
				margin-left: 24rpx;
				display: flex;
				padding: 0 12rpx;
				align-items: center;

				.search-icon {
					margin-right: 10rpx;
				}

				.search-text {
					flex: 1;
				}
			}

		}
	}
</style>